<template>
  <div class="staff-container">
    <div class="staff-sreach-container">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
        <el-form-item label="员工名称">
          <el-input v-model="searchForm.real_name" placeholder="请输入员工名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="searchForm.mobile" placeholder="请输入员工手机号码" clearable></el-input>
        </el-form-item>
        <el-form-item label="是否可用">
          <el-select v-model="searchForm.state" clearable placeholder="请选择状态">
            <el-option label="是" value="true"></el-option>
            <el-option label="否" value="false"></el-option>
            <el-option label="所有数据" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit" @click="userInfoSelect">搜索</el-button>
          <el-button type="primary" @click="clearValue">清除搜索框</el-button>
        </el-form-item>
      </el-form>
      <el-button @click="showAddDialog" type="primary" class="add-account" v-if="authority">新增员工账号</el-button>
    </div>
    <div class="staff-table-container">
      <el-table
        :data="userDataList"
        border
        height="100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        class="staff-table">
        <el-table-column
          prop="real_name"
          min-width="220"
          label="员工名称">
        </el-table-column>
        <el-table-column
          prop="mobile"
          min-width="220"
          label="手机号码">
        </el-table-column>
        <el-table-column
          min-width="220"
          label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.create_at | formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          min-width="150"
          label="成员角色">
          <template slot-scope="scope" v-if="scope.row.role">
            <el-tag type="success" style="margin: 0 5px">{{ scope.row.role }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          min-width="150"
          label="是否可用">
          <template slot-scope="scope">
            <el-switch
              @change="switchAccount(scope.row)"
              :value="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          v-if="authority">
          <template slot-scope='scope'>
            <el-button type="text" size="small" @click="showAddDialog(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- pages 分页 start -->
      <div class="block table-container-pages">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <!-- pages 分页 end -->
    </div>
    <div class="staff-dialog-container">
      <!-- 添加编辑弹窗 -->
      <el-dialog
        :title="operat + '员工'"
        :visible.sync="dialogFormVisible"
        label-width="80px"
        width="600px">
        <el-form
          :model="infoForm"
          ref="infoForm"
          label-position="left"
          label-width="80px">
          <el-form-item label="员工名称">
            <el-input v-model="infoForm.name" autocomplete="off" placeholder="请输入员工名称"></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="infoForm.mobile" autocomplete="off" :disabled="operat == '编辑'" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="登录密码">
            <el-input v-model="infoForm.pwd" autocomplete="off" placeholder="请输入登录密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="成员角色">
            <el-radio-group v-model="infoForm.role">
              <el-radio v-for="(item, index) in staffRoleList" :key="index" :label="item.name" border></el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="是否启用" v-if="operat == '编辑'">
            <el-switch
              v-model="infoForm.state"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getSpsInfoList } from './server'
import { format } from 'date-fns'
// import { primaryKey } from '@/utils/comment'
export default {
  data () {
    return {
      authority: true, // 是否显示添加员工按钮
      userDataList: [], // 用户数据列表
      searchForm: { // 搜索条件
        real_name: '',
        mobile: '',
        state: ''
      },
      staffRoleList: [], // 成员角色列表
      currentPage: 1, // 当前页码
      limit: 10, // 每页的数量
      offset: 0, // 偏移量
      total: 0, // 列表总数
      pageSize: 10, // 每页多少条数据
      operat: '添加', // 弹窗标题
      dialogFormVisible: false, // 是否显示编辑弹窗
      infoForm: { // 用户新增编辑信息列表
        name: '',
        mobile: '',
        pwd: '',
        role: '',
        state: true
      },
      staffRole: [],
      serviceId: '' // 服务商id
    }
  },
  async created () {
    await this.getStaffInfoList()
  },
  methods: {
    // 分页
    async handleCurrentChange (val) {
      this.currentPage = val
      this.offset = (val - 1) * this.limit
      await this.getStaffInfoList()
    },
    // 每页展示的数量
    handleSizeChange (val) {
      this.limit = val
      this.getStaffInfoList()
    },
    // 搜索
    async userInfoSelect () {
      this.currentPage = 1
      await this.getStaffInfoList()
    },
    // 获取员工信息列表
    async getStaffInfoList () {
      const data = {}
      const spId = this.$getLocalStorage('spId') || ''
      if (this.searchForm.real_name) data.real_name = `like.%${this.searchForm.real_name}%`
      if (this.searchForm.mobile) data.mobile = `like.%${this.searchForm.mobile}%`
      if (this.searchForm.state) data.state = `eq.${this.searchForm.state}`
      // data.limit = Math.floor(this.tableHeight / 52) // 每页几条
      // this.pageSize = Math.floor(this.tableHeight / 52) // 每页几条
      // data.offset = (this.currentPage - 1) * data.limit // 从第几条开始取数据
      // data.order = 'create_at.desc'
      const headers = { Range: `${this.offset}-${this.limit}` }
      const query = `?sp_id=eq.${spId}`
      const resData = await getSpsInfoList(data, headers, query)
      if (!resData) {
        // 获取列表失败，提示用户
        this.$message.error('获取成员信息列表失败')
        return false
      }
      const range = resData.headers['content-range'] ? resData.headers['content-range'].split('/') : []
      this.total = Number(range[1]) >> 0 // 数据的总数
      const userDataList = resData.data.data || []
      if (Object.keys(userDataList).length === 0) {
        this.userDataList = []
        return
      }
      this.serviceId = userDataList[0].sp_id
      this.userDataList = Object.assign([], userDataList)
    },
    // 清空搜索框
    clearValue () {
      this.infoForm = { // 用户新增编辑信息列表
        name: '',
        mobile: '',
        pwd: '',
        role: '',
        state: ''
      }
      this.searchForm = { // 搜索条件
        name: '',
        mobile: '',
        state: ''
      }
    },
    // 显示编辑框，并做表单初始化
    showAddDialog (data) {
      // 根据是否存在data判断是添加还是编辑
      this.staffRole = []
      if (data.sp_id) {
        this.operat = '编辑'
        this.infoForm.name = data.name
        this.infoForm.mobile = data.mobile
        this.infoForm.role = data.role
        this.infoForm.state = data.state
        this.infoForm.sp_id = data.sp_id
        this.infoForm.account_id = data.account_id
      } else {
        this.operat = '添加'
        this.infoForm = {
          name: '',
          mobile: '',
          pwd: '',
          role: '',
          state: true
        }
      }
      this.dialogFormVisible = true
    }
  },
  filters: {
    formatTime: function (val) {
      if (!val) return ''
      return format(new Date(val), 'yyyy-MM-dd HH:mm')
    },
    roleFilters: function (val, staffRoleList) {
      if (!val) return ''
      for (const key in staffRoleList) {
        const item = staffRoleList[key]
        if (item.role_id === val) return item.name
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import './index.scss'
</style>
